<template>
	<view class="uni_box">
		<!-- <navbar :isback='false' backgroundColor='#fff'>
			<view slot="left" class="hleft">
				<image class="gllogo" src="/static/LOGO.png" />
			</view>
		</navbar> -->
		<navbar :isback='false' title='研友帮-查考点'>
		</navbar>
		<!-- :style="{top:offTop+'rpx'}" -->
		<!-- #ifdef APP-PLUS -->
		<view class="immerse"></view>
		<!-- #endif -->
		<view class="newcontent">
			<!-- <view class="wrap">
				<view class="htit" :style="{height:Capheight+'px'}">
					<text>我的</text>
				</view>	
			</view> -->
			<view class="mhead">
				<view class="mhview">
					<image class="touimg" :src="info.avatar?info.avatar:'/static/new/tou2.png'" />
					<view class="mhright">
						<text class="mname">{{info.nickname}}</text>
						<text class="miaoshu">{{info.mobile}}</text>
					</view>
				</view>
			</view>
			<view class="mvlist">
				<view class="mvitem" @click="navClick(1)">
					<image class="micon" src="/static/new/mone.png" />
					<text class="cname">查询记录</text>
					<image class="ricon" src="/static/new/ricon.png" />
				</view>
				<view class="mvitem" @click="navClick(2)">
					<image class="micon" src="/static/new/mtwo.png" />
					<text class="cname">权限卡券</text>
					<image class="ricon" src="/static/new/ricon.png" />
				</view>
				<view class="mvitem" @click="navClick(5)">
					<image class="micon" src="/static/new/icon_xf.png" />
					<text class="cname">权限兑换</text>
					<image class="ricon" src="/static/new/ricon.png" />
				</view>
				<view class="mvitem">
					<button  open-type="contact" class="btn">
						
					</button>

					<image class="micon" src="/static/new/mthree.png" />
					<text class="cname">联系客服</text>
					<image class="ricon" src="/static/new/ricon.png" />
				</view>
				<!-- <view class="mvitem" @click="navClick(4)">
					<image class="micon" src="/static/new/mfour.png" />
					<text class="cname">商务合作</text>
					<image class="ricon" src="/static/new/ricon.png" />
				</view> -->
				<view class="mvitem" @click="navClick(4)">
					<image class="micon" src="/static/new/mone.png" />
					<text class="cname">有偿收录</text>
					<image class="ricon" src="/static/new/ricon.png" />
				</view>
			</view>

			<!-- <view class="keview">
				<button  open-type="contact" class="btn">
				
				</button>
				<image class="kefuicon" src="/static/new/kefu.png" />
				<text>联系客服</text>
			</view> -->
			
			
			<!-- 筛选弹窗 -->
			<ns-login :loginshow="loginshow" ref="login" @saveUserInfo="onUserInfoClick" :session_key="session_key"></ns-login>

		</view>
</view>
</template>

<script>
import nslogin from '@/components/ns-login/ns-login'
export default {
	data() {
		return {
			swlist: [{
				image: '/static/new/banner.png',
			},
			{
				image: '/static/new/banner.png',
			},
			{
				image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
			}
			],
			noticlist: [
				// '寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴',
				// '平明送客楚山孤',
				// '洛阳亲友如相问',
				// '一片冰心在玉壶'
			],
			scrollLeft: 0,//滑动距离
			currentindex: 0,
			border: false,
			keyword: '',
			enable:false,
			Captop:0,
			offTop:0,
			Capheight:0,
			shaishow:false,
			loginshow:false,
			border:false,
			userinfo:{
				mobile: "",
				token: "bb22423a-be41-4419-a812-5778737759b9"
			},
			session_key:'',

			list: [],
			page: 1,
			limit: 10,
			last_page: 1,
			status: "loadmore",
			keywords:'',
			doesHaveBangs: false, // 为true表示有刘海屏
			moindex:4,
			moshow:false,
			info:{}
		}
	},
	components: {
		'ns-login': nslogin
	},
	computed: {
	},

	mounted() {
		//在mounted中调用是确保元素已被加载
		//#ifdef MP-WEIXIN
		//通过getMenuButtonBoundingClientRect 获取胶囊的高度宽度等信息
		this.Cap = uni.getMenuButtonBoundingClientRect();
		console.log(this.Cap)
		this.Captop = this.Cap.top/ (uni.upx2px(100) / 100);
		
		
		console.log(this.Capheight)
		//我们需要吸顶的位置 是计算出来的  胶囊的高度height+胶囊距离顶部状态栏的距离top
		let CapHeight = (this.Cap.height + this.Cap.top);
		//由于拿到的单位是px 通过uni自带的upx2px方法 将px转换为rpx 
		//这样做是因为uView的Sticky组件要求传入的offset-top值单位是rpx
		this.offTop =Number( CapHeight / (uni.upx2px(100) / 100))-Number(this.Captop)
		//最后拿到想要的值并传入即可
		console.log(CapHeight)
		this.Capheight =  CapHeight-2;
		this.enable = true
		//#endif
		//#ifdef H5
		this.offTop = 44
		this.Capheight = 44
		//最后拿到想要的值并传入即可
		this.enable = true
		//#endif
	},
	async onLoad() {
		

	},
	async onShow() {
		if(!uni.getStorageSync('token')){
			// this.loginshow = true
			// #ifdef MP
			this.getLogin()
			// #endif
			
			this.getInit()
		}else{
			this.getInit()
		}
	},
	onReachBottom: function () {
	},
	methods: {
		async getLogin(){
			uni.login({
				provider: 'weixin',
				timeout: 3000,
				success: res => {
					console.log(res)
					// this.$u.toast(res.code);
					// this.copy(res.code)
					// this.loginshow = true
					if (res.code) {
						this.getLogintwo(res.code)
					}
				},
				fail: () => {
					uni.$u.toast("请求失败")
				}
			})
		},
		async getLogintwo(code){
			let res = await this.$u.api.miniapplogin({
				code:code
				// userid:uni.getStorageSync('userid')
			});
			console.log(res.userinfo)
			this.session_key = res.seeion_key
			uni.setStorageSync('token',res.userinfo.token)
			// uni.setStorageSync('userid',res.Data.userinfo.userid)
			if(res.userinfo.mobile == ''||!res.userinfo.mobile){
				//弹出登录
				this.loginshow = true
			}else{
				this.getInit()
			}
			// // console.log(res)
			// console.log(res.Data)
		},
		getInit(){//请求接口
			this.getuserinfo();//用户信息
			// this.getLun();//轮播图

			// if(this.list==''){
			// 	this.getList();//列表接口
			// }
		},
		async getuserinfo(){
			let res = await this.$u.api.userinfo({
			});
			
			this.info = res
		},
		async getLun(){
			let res = await this.$u.api.banner({
			});
			console.log(res) 
		},
		async getList(){//列表数据
			let res = await this.$u.api.project({
			  pagesize:this.limit,
			  page:this.page,
			  keywords:this.keywords
			});
			console.log(res)
			this.last_page = res.lastpage;
			let list = res.list;
			this.list = this.page == 1 ? list : [...this.list, ...list];	
			// console.log(this.list)
			if(this.page >= this.last_page){
			  this.status = 'nomore';
			}
			
		},
		loadmore() {
			let page = this.page;
			// let last_page = this.last_page;
			if (this.status == 'loadmore') {
				this.page++;
				this.getList();
			}
		},
		async getuser() {
			let res = await this.$u.api.userinfo({
			});
			this.user = res.user

		},
		navClick(e){
			if(e == 1){
				this.navrouter("/pages_subject/twoPage/MyJilu");
			}else if(e == 2){
				this.navrouter("/pages_subject/twoPage/kaquan");
			}else if(e == 3){
				// this.navrouter("/pages_subject/twoPage/kaquan");
			}else if(e == 4){
				this.navrouter("/pages_subject/twoPage/shoulu");
			}else if(e == 5){
				this.navrouter("/pages_subject/twoPage/quandui");
			}
			
		},
		blur(){
			this.getClear()
		},
		getClear(){
			this.list = []
			this.page = 1,
			this.status= "loadmore"
			this.getList()
		},
		onUserInfoClick(e){
			console.log(e)
			if(e.code == 200){
				this.loginshow = false
				this.getInit()
			}
		}

	}
}
</script>

<style lang="scss" scoped>
page,
html {
	background-color: #ffffff;
}

/deep/ .u-sticky {
	z-index: 1007500000 !important;
}

.gllogo {
	width: 237rpx;
	height: 67rpx;
}

.hleft {
	position: absolute;
	left: 10px;
}

.newcontent {
	padding: 0rpx 0 120rpx;
	display: flex;
	flex-direction: column;

	.mvlist{
		display: flex;
		flex-direction: column;
		padding: 0rpx 50rpx;
		// justify-content: space-between;
		position: relative;
		// margin-top: -20rpx;
		
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.06);
		border-radius: 10rpx;
		margin:0 30rpx;
		margin-top: 30rpx;
		.mvitem{
			width: 100%;
			// height: 160rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			// padding: 24rpx 16rpx 16rpx 24rpx;
			// background: linear-gradient(312deg, #D8E5FF 0%, #F4F8FF 100%);
			// border-radius: 20rpx 20rpx 20rpx 20rpx;
			border-bottom: 1rpx solid #F7F7F5;
			padding: 35rpx 0;
			position: relative;
			.micon{
				width: 40rpx;
				height: 40rpx;
				margin-right: 14rpx;
			}
			.cname{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.ricon{
				margin-left: auto;
				width: 11rpx;
				height: 20rpx;
			}
			
			
		}
		.mvitem:last-child{
			border-bottom: none;
		}
		.btn{
				position: absolute;
				background-color: transparent;
				width: 100%;
				height: 100%;
				z-index: 1;
				left: 0;
				border: none !important;
				padding: 0;
			}
			/deep/ button::after  {
			border: none;
		}
		.two{
			margin-left: auto;
			background: linear-gradient(312deg, #D8F1FF 0%, #F4FBFF 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
	.wrap{
		position: relative;
	}
	.souview{
		margin: 30rpx;
		height: 80rpx;
		background: #F6F9FF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 24rpx;
		.souicon{
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}
	.laoview{
		margin: 30rpx 30rpx 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.laoitem{
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// margin-bottom: 35rpx;
			padding: 20rpx 0;
			.doc{
				width: 88rpx;
				height: 106rpx;
				margin-bottom: 10rpx;
			}
			text{
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #2F3033;
			}
		}
		.laoactive{
			background: #F6F9FF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}
	}
	.wenview{
		display: flex;
		flex-direction: column;
		margin: 0 30rpx;
		.wenhead{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 30rpx;
			.ctit{
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #2F3033;
			}
			.cha{
				margin-left: auto;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #C8C9CC;
			}
		}
		.wenlist{
			display: flex;
			flex-direction: column;
			.wenitem{
				display: flex;
				flex-direction: column;
				margin-bottom: 32rpx;
				border-bottom: 1rpx solid #eee;
				padding-bottom: 20rpx;
				.wione{
					display: flex;
					flex-direction: row;
					align-items: center;
					.wenicon{
						width: 44rpx;
						height: 44rpx;
						margin-right: 8rpx;
					}
					.wentit{
						max-width: 80%;
						display: inline-block;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #2F3033;
					}
					.shang{
						width: 24rpx;
						height: 12rpx;
						margin-left: auto;
					}
				}
				.witwo{
					margin-left: 52rpx;
					display: inline-block;
					margin-top: 24rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #606266;
				}
			}
		}
		
	}
	.huan{
		margin: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		.huantit{
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #216CFE;
		}
		.huanicon{
			margin-left: 8rpx;
			width: 24rpx;
			height: 24rpx;
		}
	}
	.keview{
		position: fixed;
		width: 184rpx;
		height: 64rpx;
		background: #216CFE;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		right: 15rpx;
		bottom: 30rpx;
		padding: 0 4rpx;
		// #ifdef H5
		bottom: 130rpx;
		// #endif
		// position: relative;
		.kefuicon{
			width: 56rpx;
			height: 56rpx;
		}
		text{
			display: inline-block;
			margin-left: 12rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.btn{
			position: absolute;
			background-color: transparent;
			width: 100%;
			height: 100%;
			z-index: 1;
			border: none;
		}
		/deep/ button::after  {
			border: none;
		}
	}

	// 选择弹窗
	.xuanview{
		/deep/.u-mode-center-box{
			background-color: transparent;
		}
		.popview{
			background: linear-gradient(312deg, #D8E5FF 0%, #F4F8FF 100%);
			opacity: 1;
			padding: 90rpx 30rpx 30rpx;
			border-radius: 25rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.popitem{
				padding: 12rpx 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #2F3033;
				margin-bottom: 20rpx;
				margin-right: 10rpx;
			}
		}
	}

	.hlist {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
		.hitem {
			width: 48%;
			min-height: 400rpx;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx 20rpx;
			margin-bottom: 30rpx;
			box-shadow: 0rpx 4rpx 6rpx 1rpx rgba(107, 107, 107, 0.07);

			.hone {
				width: 100%;
				height: 330rpx;
				border-radius: 20rpx 20rpx 0 0;

				.listimg {
					width: 100%;
					height: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}

			}

			.htwo {
				padding: 15rpx 15rpx 25rpx;

				.hname {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 2; //行数
					line-clamp: 2;
					-webkit-box-orient: vertical; //盒子中内容竖直排列

				}

				.hmiao {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					display: block;
					margin-top: 8rpx;
				}
			}
		}

		.hitem:nth-child(even) {
			margin-left: auto;
		}
	}
}

.mhead{
	position: relative;
	width: 100%;
	height: 150rpx;
	margin-top: 50rpx;
	margin-bottom: 30rpx;
	.mheadimg{
		position: absolute;
		width: 100%;
		height: 100%;

	}
	.mhview{
		position: relative;
		
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 30rpx;
		// padding-top:  calc(var(--status-bar-height) + env(safe-area-inset-top); 
		.touimg{
			width: 140rpx;
			height: 140rpx;
			border: 4rpx solid #6b94e6;
			border-radius: 50%;
			// border-image: linear-gradient(147deg, rgba(33.00000183284283, 108.00000116229057, 254.00000005960464, 1), rgba(160.22124499082565, 192.3859566450119, 255, 1)) 4 4;
		}
		.mhright{
			margin-left: 32rpx;
			display: flex;
			flex-direction: column;
			.mname{
				font-size: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #2F3033;
			}
			.miaoshu{
				display: inline-block;
				margin-top: 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #505050;
			}
		}
	}
}

.txt {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.htit{
	// height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	color: #121212;
	position: absolute;
	z-index: 10;
	width: 100%;
	padding-top:  calc(var(--status-bar-height) + env(safe-area-inset-top); 
}
.immerse {
	width: 100%;
	height: calc(var(--status-bar-height) + env(safe-area-inset-top));
	background-color: #fff;
	// #ifdef APP-PLUS
	height: calc(var(--status-bar-height);
			// #endif
			z-index: 1007500000;
			position: relative;
	}</style>
